<!--作者:小可 QQ:58529016 Email:anlun214@qq.com,欢迎合作洽谈!-->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Flash2AnnieEngine</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,user-scalable=no">
    <!--如果需要往qq里分享则需要开启下面三个属性-->
    <!--<meta itemprop="name" content="Flash2x开发神器!">-->
    <!--<meta itemprop="description" content="用Flash2x开发Html5项目,让制作更简单,让动画更高效!">-->
    <!--<meta itemprop="image" content="http://web.flash2x.org/Public/images/Flash2xLogo.png">-->
    <script src="libs/annieCore.min.js"></script>
    <!--如果有用到annieUI组件类,则需要开启下面的js-->
    <!--<script src="libs/annieUI.min.js"></script>-->
    <script src="src/Main.js?v=53"></script>
    <script type="text/javascript" src="../../script/api.js"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0px;
            border: 0px;
            overflow: hidden;
            position: absolute;
            background-color: #009966;
        }
        #btn{
          display: inline-block;
          padding:10px 50px;
          background: #4d3942;
          color:#FFF;
          position: fixed;
          bottom:20px;
          margin-left:50%;
          transform:translateX(-50%);
          border-radius: 4px;
          border:1px solid #FFF;
        }
        #btn-group{
            position: absolute;
            z-index: 9999;
            bottom:100px;
            right:10px;



        }
        .btn{
          display: block;
          padding:5px 20px;
          border:1px solid #FFF;
          text-align: center;
          margin:10px;
          background: #4d3942;
          border-radius: 3px;
          color:#FFF;

        }
    </style>
</head>
<body>
<!--如果不想canvas全屏而是作为html中的一个标签,请设置div的style.width和style.height为实际值如<div id="annieEngine" style="width:320px;height:576px;line-height:0;font-size:0"></div>-->
<div id="annieEngine" style="line-height:0;font-size:0"></div>
<div id="btn">开始检测</div>
<!--
<ul id="btn-group">
  <li id='man-btn' class="btn" data-role="man">男人</li>
  <li id='woman-btn' class="btn" data-role="womom">女人</li>
  <li id='ruler-btn' class="btn" data-role="ruler">温度计</li>
</ul>
-->
<script>

var role;
var btn = $api.byId('btn');
var manBtn = $api.byId('man-btn');
var womanBtn = $api.byId('woman-btn');
var rulerBtn = $api.byId('ruler-btn');



globalDispatcher.addEventListener(annie.Event.COMPLETE, function(){
  creat('woman');
  //createRuler();
});


$api.addEvt(manBtn, 'click', function(){
  trace('man-btn')
  creat('man');
});
$api.addEvt(womanBtn, 'click', function(){
  trace('woman-btn')
  creat('woman');
});
$api.addEvt(rulerBtn, 'click', function(){
  role = $api.create('ruler');
  role.x = 170;
  role.y = 90;
});

function creat(type){
  var type = type || 'man';

  role = $api.create(type);

  role.x = 90;
  role.y = 90;

  $api.addEvt(btn, 'click', function(){
    role.checkHealth(3000);
  });

  role.addEventListener('start',function(){
      $api.html(btn,"暂停检测");
  });
  role.addEventListener('pause',function(){
      $api.html(btn,"继续检测");
  });
  role.addEventListener('resume',function(){
      $api.html(btn,"暂停检测");
  });

  role.addEventListener('complete',function(){
      $api.html(btn,"开始检测");
  });
}



function createRuler(){
  role = $api.create('ruler');
  role.x = 170;
  role.y = 90;
  var value = 0;
  var interval = setInterval(function(){
    value = Math.random()*(45-25) + 25;

    role.start(value);
  },100);
}

</script>
</body>
</html>
